import { Alert } from "antd"
import { Fragment } from "react"
import { useEffect } from "react"
import { useSelector } from "react-redux"
import { useHistory, useParams } from "react-router"
import { useTopic } from '../../store/action/index'
import Detail from '../../compoment/detail'
import Commentitem from '../../compoment/comment'

function Topic() {
  let { id } = useParams()
  let getData = useTopic()
  let { loading, data, isError, msg } = useSelector(state => state.topic)
  useEffect(() => {
    getData(id)
  }, [id])
  let history = useHistory()
  return <div>
    {isError ? <Alert closable type={'error'}
      onClose={() => { history.goBack() }}
      message={'请求出错'} description={
        <Fragment>
          <p>{msg}</p>
          <p>点击关闭按钮返回上一步</p>
        </Fragment>
      } /> : <Fragment><Detail loading={loading} data={data} />
      <Commentitem data={data.replies} />
    </Fragment>}
  </div>
}

export default Topic